<template>
  <div class="more-container">

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="活动设置" name="first" >
        <el-row>
          <el-col :span="24">
            <classTable @refreshdata='refreshdata' @changepageTotal='changepageTotal'
              @changepage='changepage' :tabData='tabList'></classTable>

          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="发放记录" name="second"  v-if="checkPermission(['reducedHistory'])">
        <!-- 表格 -->
        <studenttablehead :tabData='listData' @handleSizeChange='handleSizeChange' @handleCurrentChange='handleCurrentChange'
          v-if="issuccess">

          <el-table-column prop="studentPackage" label="活动班型" align="center">
          </el-table-column>
          <el-table-column prop="coupon_id" label="关联优惠券" align="center">
          </el-table-column>
          <el-table-column prop="" label="发放状态" align="center">
              <span>已发放</span>
          </el-table-column>
          <el-table-column prop="status" label="使用状态" align="center">
          </el-table-column>

        </studenttablehead>
      </el-tab-pane>
    </el-tabs>
    <div class="backBtn" @click="backActivity"><img src="../../../assets/schooladmin/back.png" alt=""></div>
  </div>
</template>

<script>
  import {
    getcourseList
  } from '@/api/course'
  //api
  import {

    couponoption,
getrecord
  } from '@/api/coupon'
    //按钮权限验证
  import checkPermission from "@/utils/permission";
  import classTable from './component/classTable'
  //学员表格
  import studenttablehead from '@/components/studenthead'
  import {

    coupontryFreeList
  } from '@/api/student'
  export default {
    data() {
      return {
       //页码
       page: 1,
       //翻页总数
       total: 10,
        readId: null,
       issuccess:false,
        activeName: 'first',
        //表格数据
        tabList: {},
        option: [],
          listData:{}
      }
    },
    methods: {
checkPermission,
      //切换事件
      handleClick(tab, event) {
        this.page = 1
        this.total = 10
        if(tab.name=='first'){
        this.getCourseList(this.page, this.pageTotal)
        }else{
          //获取领取记录
          this.getlistData(this.readId)
        }
      },
      backActivity() {
        this.$router.go(-1); //返回上一层
      },
      //获取列表数据
      async getCourseList(page = 1, rows = 10) {
        let params = {
          page,
          rows,
          _request:'reduce'
        }

        let data = await getcourseList(params)
        this.tabList = data.data
      },

      //刷新列表
      refreshdata() {
        this.getCourseList(this.page, this.pageTotal)
      },
      //翻页 一页有多少条数据
           handleSizeChange(val) {
             this.total = val
             //获取数据
             this.getlistData()
           },
           //翻页码
           handleCurrentChange(val) {
             this.page = val
             //获取数据
             this.getlistData()
           },
           //获取列表
           async getlistData() {
             let params = {
               page: this.page,
               rows: this.total,
             activityId:  this.readId,
              _request:'reduce'
             }
             let data = await getrecord(params)
             if (data.code == '0000') {
               this.listData = data.data
               this.issuccess = true
             }
             console.log(this.listData)
           },
      //总数翻页
      changepageTotal(val) {
        this.pageTotal = val
        this.getCourseList(this.page, this.pageTotal)
      },
      //翻页
      changepage(val) {
        this.page = val
        this.getCourseList(this.page, this.pageTotal)
      },
      changeCouponS(){
        this.getCourseList(this.page, this.pageTotal)
      },

    },
    components: {
      classTable,
      studenttablehead
    },
    created() {


    },
    mounted() {
 this.readId = this.$route.query.id
      //获取列表数据
      this.getCourseList(this.page, this.pageTotal)
     // this.getcouponoption()

    }
  }
</script>

<style scoped lang="scss">
  ::v-deep {
    .el-checkbox-group {
      display: flex;
      flex-direction: column;
    }

    .el-dropdown-link {
      cursor: pointer;
      color: #409EFF;
    }

    .el-tabs__header {
      left: 55px;
    }

    .el-alert {
      margin-bottom: 2rem;
    }

    .el-checkbox {
      margin-top: 2rem;
    }

    .el-select {
      margin: 0 0.5rem;
    }

    .el-tabs__nav-wrap::after {
      height: 1px;
    }

    .el-checkbox {
      margin-bottom: 15px;
    }

    .el-tabs__item {
      font-size: 16px;
    }

    .el-tabs__item.is-active {
      font-weight: bold;
    }

    .ruleradio {
      .el-radio {
        display: block;
        display: flex;
        align-items: center;
        margin: 20px 0;

        .el-input {
          margin: 0 5px;
        }

        .el-input__inner {
          padding: 0 5px;
          text-align: center;
        }

        &:last-child {
          margin-bottom: 0;
        }

        &:first-child {
          margin-top: 8px;
        }
      }
    }

    .el-step__head.is-success {
      border-color: #3388FF;
      color: #fff;

      .el-step__icon {
        background-color: #3388FF;
        color: #fff;
      }
    }

    .el-step__title.is-success {
      color: #323233
    }

    .el-step__head.is-process {
      color: #c0c4cc;
      border-color: #c0c4cc;

    }

    .el-step__title {
      font-size: 14px;
      color: #323233;
    }

    .el-step__title.is-process {
      font-weight: normal;
    }
  }

  .limits {
    margin-top: 20px;
    margin-bottom: 20px;

    .title {
      font-size: 16px;
      font-weight: bold;
    }

    .content-text {
      margin: 40px auto 0;

      p {
        font-weight: bold;
        font-size: 16px;
        color: #323233;
      }

      ul {
        li {
          text-align: justify;
          font-size: 13px;
          color: #666;
          line-height: 20px;
          margin-bottom: 10px;
          line-height: 32px;
        }
      }
    }
  }

  .submitBtn {
    margin-top: 1.5rem;
  }
 .addColorBtn{
  background-color: #ff7c24;
  border: 1px solid #ff8d3c;
 }
  .line {
    height: 1px;
    background-color: #707070;
    margin-top: 30px;
  }

  .more-container {
    position: relative;
  }

  .demo-dynamic {
    margin-top: 40px;
  }

  .backBtn {
    position: absolute;
    left: 20px;
    top: 19px;
    background-color: #fff;
    color: #303133;
    font-size: 16px;
    font-weight: 500;
    line-height: 40px;
    height: 40px;
    border-bottom: 1px solid #e4e7ed;
    padding-right: 35px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    img {
      width: 20px;
      height: 20px;
    }
  }
</style>
